<template>
  <el-dialog
    width="800px"
    :visible.sync="dialogVisible"
    :title="title"
    :append-to-body="true"
    @close="onClose"
  >

    <table class="tb-table">
      <tr>
        <td class="tb-title" width="15%">名称:</td>
        <td colspan="3" width="85%">{{ form.name }}</td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">提示信息:</td>
        <td colspan="3" width="85%">
          {{ form.message }}
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">跳转地址:</td>
        <td colspan="3" width="85%">
          <span>{{ form.url }}</span>
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="20%">
          附件信息:
        </td>
        <td colspan="3">
          <table class="tb-table">
            <tr>
              <td class="tb-title txt-center" width="33%">文件名</td>
              <td class="tb-title txt-center" width="33%">大小</td>
              <td class="tb-title txt-center" width="34%">操作</td>
            </tr>
            <tr v-for="(item,index) in form.files" :key="index">
              <td class="txt-center">{{ item.name }}</td>
              <td class="txt-center">{{ parseInt(item.size / 1000) }} kb</td>
              <td class="txt-center">
                <el-button type="text" @click="view(item.id)">查看</el-button>
                <el-button type="text" @click="download(item.id)">下载</el-button>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td class="tb-title" width="15%">开始时间:</td>
        <td width="35%">
          {{ form.startTime }}
        </td>
        <td class="tb-title" width="15%">结束时间:</td>
        <td width="35%">
          {{ form.endTime }}
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">创建时间:</td>
        <td width="35%">
          {{ form.createTime }}
        </td>
        <td class="tb-title" width="15%">更新时间:</td>
        <td width="35%">
          {{ form.updateTime }}
        </td>
      </tr>

    </table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { getOne } from '@/api/sysBanner'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '查看信息',
      form: {
        id: '',
        name: '',
        message: '',
        startTime: '',
        endTime: '',
        url: '',
        enable: '',
        files: []
      }
    }
  },
  methods: {
    onShow(id) {
      if (id) {
        this.form.id = id
        this.title = '查看'
        this.init()
      }
      this.dialogVisible = true
    },
    init() {
      getOne(this.form.id).then(res => {
        if (res.code === 20000) {
          this.form.id = res.data.id
          this.form.name = res.data.name
          this.form.message = res.data.message
          this.form.url = res.data.url
          this.form.enable = res.data.enable
          this.form.startTime = res.data.startTime
          this.form.endTime = res.data.endTime
          this.form.updateTime = res.data.updateTime
          this.form.createTime = res.data.createTime
          this.form.files = res.data.files
        }
      })
    },
    download(id) {
      window.location.href = '/api/anon/download?id=' + id
    },
    view(id) {

    },
    onClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.txt-center {
  text-align: center;
  padding: 0 0 !important;
}
</style>
